<!--用户管理 user_manager-->

<template>
    <div id="user_manager">
        <!--搜索框--><!--如果登录人不是管理员，就没有这个搜索框-->
        <div v-if="isManager" class="above_box">
            <div class="page_title"><i class="el-icon-search"></i><span style="margin-left:10px ">搜索用户</span></div>
            <el-row style="margin:0 0 25px" :gutter="100">
                <el-col :span="6">
                    <el-input
                            placeholder="请输入用户账号"
                            v-model="searchForm.backUserName"
                            prefix-icon="el-icon-user"
                            autofocus
                            clearable>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-input
                            placeholder="请输入用户邮箱"
                            v-model="searchForm.backUserEmail"
                            prefix-icon="el-icon-message"
                            @change="()=>{searchForm.backUserEmail=outsideMethod.emailInputMatch(searchForm.backUserEmail)}"
                            clearable>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-input
                            placeholder="请输入用户手机"
                            v-model="searchForm.backUserTel"
                            prefix-icon="el-icon-phone-outline"
                            @change="()=>{searchForm.backUserTel=outsideMethod.telInputMatch(searchForm.backUserTel)}"
                            clearable>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-select
                            style="width: 100%"
                            v-model="searchForm.backUserStatus"
                            clearable
                            placeholder="请选择用户状态">
                        <el-option label="正常" value="正常"></el-option>
                        <el-option label="禁用" value="禁用"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row>
                <el-col style="text-align: center" :span="24">
                    <el-button
                            type="success"
                            icon="el-icon-document"
                            @click.stop.prevent="()=>{totalData=[...userData]} ">查看全部
                    </el-button>
                    <el-button
                            type="primary"
                            icon="el-icon-search"
                            @click.stop.prevent="()=>{totalData=outsideMethod.matchArrayData(userData,{...searchForm})} ">
                        搜索
                    </el-button>
                    <el-button type="primary" icon="el-icon-refresh-left"
                               @click.stop.prevent="outsideMethod.resetBtn(searchForm)" plain>重置
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <!--信息框-->
        <div class="below_box">
            <div class="page_title"><i class="el-icon-user-solid"></i><span style="margin-left:10px ">用户信息</span></div>
            <div style="margin:0 50px">
                <el-table
                        :data="tableData"
                        style="width: 100%"
                        :stripe=true
                        :border=true
                        :header-cell-style="{backgroundColor:'#409EFF',textAlign:'center',color:'white'}"
                        :cell-style="{textAlign:'center'}"
                        slot="empty"
                >
                    <el-table-column
                            prop="backUserId"
                            label="编号"
                            min-width="14.3%">
                    </el-table-column>
                    <el-table-column
                            prop="backUserName"
                            label="账号"
                            min-width="14.3%">
                    </el-table-column>
                    <el-table-column
                            label="邮箱"
                            min-width="14.3%">
                        <template slot-scope="scope">
                            <span :class="{noticeWordColor:scope.row.backUserEmail==='暂无信息'}">{{scope.row.backUserEmail}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="手机"
                            min-width="14.3%">
                        <template slot-scope="scope">
                            <span :class="{noticeWordColor:scope.row.backUserTel==='暂无信息'}">{{scope.row.backUserTel}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="角色"
                            min-width="14.3%">
                        <template slot-scope="scope">
                            <span :class="{noticeWordColor:scope.row.roleName==='暂无信息'}">{{scope.row.roleName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="状态"
                            min-width="14.3%">
                        <template slot-scope="scope">
                            <el-tag
                                    :type="scope.row.backUserStatus === '正常' ? 'success' : 'danger'"
                                    disable-transitions>{{scope.row.backUserStatus}}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            min-width="14.2%">
                        <template slot-scope="scope">
                            <el-button type="text" @click="()=>{dialogFormVisible = true;changeForm={...scope.row}}">
                                修改
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination
                    style="text-align: center;padding-top: 25px"
                    background
                    layout="prev, pager, next"
                    :current-page="currentPage"
                    :total="totalCount"
                    @current-change="(nowPage)=>{currentPage=nowPage;tableData=outsideMethod.currentPageData(currentPage,pageSize,totalData)}">
            </el-pagination>
        </div>
        <!--修改框-->
        <div>
            <el-dialog :visible.sync="dialogFormVisible"
                       :before-close="(done)=>{outsideMethod.boxClose(this,done,'修改')}"
                       center>
                <div slot="title"><i class="el-icon-document" style="margin-right: 10px"></i>修改信息</div>

                <div class="p_dialog_box">
                    <el-row :gutter="0" class="p_dialog_box_row">
                        <el-col class="col_left" :span="5">
                            <span><i class="el-icon-user"></i>账号：</span>
                        </el-col>
                        <el-col class="col_right" :span="19">
                            <el-input v-model="changeForm.backUserName" disabled></el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="0" class="p_dialog_box_row">
                        <el-col class="col_left" :span="5">
                            <span><i class="el-icon-message"></i>邮箱：</span>
                        </el-col>
                        <el-col class="col_right" :span="19">
                            <el-input v-model="changeForm.backUserEmail"
                                      placeholder="请输入用户邮箱"
                                      @blur="()=>{outsideMethod.canNotBeNull(changeForm.backUserEmail,'邮箱')}"
                                      @change="()=>{changeForm.backUserEmail=outsideMethod.emailInputMatch(changeForm.backUserEmail)}"
                                      :disabled="isManager"
                                      clearable></el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="0" class="p_dialog_box_row">
                        <el-col class="col_left" :span="5">
                            <span><i class="el-icon-phone-outline"></i>手机：</span>
                        </el-col>
                        <el-col class="col_right" :span="19">
                            <el-input v-model="changeForm.backUserTel"
                                      placeholder="请输入用户电话"
                                      @blur="()=>{outsideMethod.canNotBeNull(changeForm.backUserTel,'手机')}"
                                      @change="()=>{changeForm.backUserTel=outsideMethod.telInputMatch(changeForm.backUserTel)}"
                                      :disabled="isManager"
                                      clearable></el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="0" class="p_dialog_box_row">
                        <el-col class="col_left" :span="5">
                            <span><i class="el-icon-view"></i>密码：</span>
                        </el-col>
                        <el-col class="col_right" :span="19">
                            <el-input v-model="changeForm.backUserPassword"
                                      placeholder="请输入用户密码"
                                      @blur="()=>{outsideMethod.canNotBeNull(changeForm.backUserPassword,'密码')}"
                                      :disabled="isManager"
                                      show-password></el-input>
                        </el-col>
                    </el-row>
                    <el-row :gutter="0" class="p_dialog_box_row">
                        <el-col class="col_left" :span="5">
                            <span><i class="el-icon-s-custom"></i>角色：</span>
                        </el-col>
                        <el-col class="col_right" :span="19">
                            <el-select
                                    style="width: 100%"
                                    v-model="changeForm.roleId"
                                    @change="()=>{outsideMethod.canNotBeNull(changeForm.roleId,'角色')}"
                                    placeholder="请选择用户角色"
                                    :disabled="(!isManager)"
                                    clearable>
                                <el-option
                                        v-for="item in roleList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row :gutter="0" class="p_dialog_box_row">
                        <el-col class="col_left" :span="5">
                            <span><i class="el-icon-setting"></i>状态：</span>
                        </el-col>
                        <el-col style="line-height: 40px;padding-left: 15px" class="col_right" :span="19">
                            <el-radio v-model="changeForm.backUserStatus" label="正常" :disabled="(!isManager)">正常
                            </el-radio>
                            <el-radio v-model="changeForm.backUserStatus" label="禁用" :disabled="(!isManager)">禁用
                            </el-radio>
                        </el-col>
                    </el-row>
                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button
                            type="primary"
                            @click="()=>{if(outsideMethod.bothNotBeNull(changeForm)){updateRequest(changeForm)}}">确 定
                    </el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import pMethod from './pmw_common/p_common_method' //公共方法引入
    import {mapActions, mapState, mapGetters, mapMutations} from 'vuex'
    import api from '../../tool/api'
    import http from '../../tool/http'

    export default {
        name: "userManager",
        data() {
            return {
                outsideMethod: {...pMethod},/*外部公共方法*/
                currentPage: 1,//当前页
                pageSize: 10,//页面数据条数
                totalData: [],
                totalCount: 0,

                searchForm: {
                    backUserName: '',
                    backUserEmail: '',
                    backUserTel: '',
                    backUserStatus: ''
                },//搜索框内容
                changeForm: {
                    backUserName: '',
                    backUserEmail: '',
                    backUserTel: '',
                    backUserPassword: '',
                    backUserStatus: '',
                    roleId: '',
                },//修改框内容

                tableData: [],
                roleList: [],//可用角色列表

                dialogFormVisible: false,//修改框显示的控制属性
                isManager: Boolean(sessionStorage.getItem('isAdmin')),//是否为管理员
            }
        },
        computed: {
            ...mapGetters(['roleData', 'userData', 'detailTotalData']),
        },
        methods: {
            ...mapActions(['getRoleDataAction', 'getUserDataAction', 'getDetailTotalDataAction']),
            whenTotalDataChanged(newValue) {
                this.totalCount = newValue.length;
                this.tableData = this.outsideMethod.currentPageData(1, this.pageSize, newValue)
            },
            /*修改请求*/
            async updateRequest(reqFormData) {
                let reqUrl = '';//定义请求路径
                let reqMethod = 'put';//定义请求方式
                let reqData = reqFormData;//定义请求参数

                if (this.isManager) {
                    reqUrl = api.managerMsgUpdate;
                } else {
                    reqUrl = api.backUserMsgUpdate;
                }

                await http({
                    url: reqUrl,
                    method: reqMethod,
                    parameter: reqData
                }).then(res => {
                    if (res.data.code === 200) {
                        this.outsideMethod.messageNotic('修改信息', 'success');
                        /*最后的弹出框要关闭*/
                        this.dialogFormVisible = false;
                    } else {
                        this.outsideMethod.messageNotic('修改信息', 'error');
                    }

                }).catch(err => {
                    console.log(err);
                    this.outsideMethod.messageNotic('修改信息', 'error');
                });

                return false
            },
        },
        watch: {
            totalData(newValue, oldValue) {
                this.totalCount = newValue.length;
                this.currentPage = 1;
                this.whenTotalDataChanged(newValue);
            },
        },
        async created() {
            /*0.获取权限数据*/
            await this.getDetailTotalDataAction();//更新store里面的DetailData数据

            /*1.获取角色信息*/
            await this.getRoleDataAction(this.detailTotalData);//更新store里面的RoleData数据

            /*2.获取用户信息*/
            await this.getUserDataAction(this.roleData);

            /*3.获取角色列表*/
            let arr = [...this.roleData];
            let listArr = [];
            arr.map(item => {
                let obj = {value: '', label: ''};
                obj.value = item.roleId;
                obj.label = item.roleName;
                listArr.push(obj)
            });
            this.roleList = [...listArr];

            /*4.判断是不是管理员*/
            if (!this.isManager) {//不是管理者，可以获取所有用户信息
                let id = sessionStorage.getItem('backUserId');
                this.userData.forEach(i => {
                    if (i.backUserId.toString() === id) {
                        this.totalData = [i];
                    }
                })
            } else {
                this.totalData = [...this.userData];
                /*/!*数据调整*!/
              if(!loginer.backUserEmail)loginer.backUserEmail='暂无信息';
              if(!loginer.backUserTel)loginer.backUserTel='暂无信息';
              if(!loginer.backUserPassword)loginer.backUserPassword='';
              loginer.backUserStatus===1?loginer.backUserStatus='正常':loginer.backUserStatus='禁用';
              if(!loginer.roleName){ //没有身份/角色
                  loginer.roleId='';
                  loginer.roleName='暂无信息';
              }
              else {//有身份/角色
                  this.roleData.map(r=>{
                      if(loginer.roleName===r.roleName){
                          loginer.roleId=r.roleId;
                          loginer.roleName=r.roleName;
                      }
                  })
              }*/
            }

            //console.log(this.totalData);

            // console.log(this.roleData);//角色数据
            // console.log(this.detailTotalData);
            // console.log(this.userData);

            /* /!*2.获取登录者的身份*!/
             let loginer={};
             await http({
                 url:api.getBackUserMsg,
                 method: 'get'
             }).then(res=>{
                 if(res.data.code===200){
                     loginer=res.data.data;
                 }
             }).catch(err=>{
                 console.log(err);
             });*/
        }
    }
</script>

<style scoped lang="less">
    * {
        /*margin: 0;
        padding: 0;*/
    }

    .noticeWordColor {
        color: red;
    }

    .page_title {
        border: none;
        border-bottom: 1px solid #CCC8D9;
        font-size: 1.25em;
        padding-bottom: 15px;
        margin-bottom: 15px;
        color: #325b8f;
    }

    .p_dialog_box {
        margin: 0 75px;

        .p_dialog_box_row {
            margin-bottom: 10px;

            .col_left {
                text-align: center;

                span {
                    display: inline-block;
                    height: 40px;
                    line-height: 40px;

                    i {
                        margin-right: 10px;
                    }
                }
            }

            .col_center {

            }

            .col_right {

            }
        }
    }

    #user_manager {
        /*background-color: #F1F3F7;
        padding: 15px;*/

        .above_box {
            background-color: white;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 15px;
        }

        .below_box {
            background-color: white;
            border-radius: 10px;
            padding: 25px;
        }
    }
</style>
